<!--
 * @Author: Binggan
 * @Date: 2020-02-04 13:39:04
 * @LastEditors: Binggan
 * @LastEditTime: 2020-03-02 16:10:27
 * @Description: 
 -->
<template>
  <div>
    <!-- 单文件上传组件 -->
    <!-- <div style="margin-bottom:12px">
      <label style="margin-right:6px;">{{labelTit}}</label>
      <Input v-model="fileName" placeholder="请输入文件名称" style="width: 120px" />
    </div> -->
    <div class="upload-box">
      <label style="margin-right:6px;">{{labelTit}}</label>
      <Button class="bing-upload-btn" icon="ios-cloud-upload" type="primary" :loading="mloading"><span v-if="!mloading">选择{{fileType}}文件</span><span v-else>上传中</span></Button>
      <input ref="uploadfile" type="file" class="img-upload" @change="fileUpload" :accept="acceptType">
    </div>
    <span class="uploadTip" :class="uploadStatus?'success':'error'" v-if="curTipShow">*{{uploadStatus?"上传完成":"上传失败"}}</span>
  </div>
</template>
<script>
export default {
  name: "simpleUpload",
  data() {
    return {
      fileName: "",
      uploadStatus: false,
      mloading: false,
      curTipShow: false
    };
  },
  props: {
    acceptType: {
      type: String,
      default: "image/png,image/jpg,image/jpeg,image/gif"
    },
    labelTit: {
      type: String,
      default: "文件名称"
    },
    tipShow: {
      type: Boolean,
      default: false
    },
    fileType: {
      type: String,
      default: "图片"
    }
  },
  watch: {
    tipShow(val) {
      console.log("监测到变化", val);
      if (val && this.curTipShow) {
        this.curTipShow = false;
      }
    }
  },
  methods: {
    fileUpload() {
      //上传
      console.log(event);
      let files = event.target.files[0];
      var createObjectURL = function(blob) {
        return window[window.webkitURL ? "webkitURL" : "URL"][
          "createObjectURL"
        ](blob);
      };
      var imgdata = createObjectURL(files); //预览路径
      console.log(imgdata);
      this.$emit("imgPrew", imgdata);
      this.mloading = true;

      let formData = new FormData();
      formData.append("file ", files);
      // formData.append("target ", "garbage");
      let newAxios = this.$axios.create();
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      newAxios
        .post("/pic/upload", formData, config)
        .then(res => {
          let oRes = res.data;
          if (oRes && oRes.errorCode == 0) {
            this.$Message.success("添加文件成功");
            this.mloading = false;
            this.curTipShow = true;
            this.uploadStatus = true;
            let fileData = { file: oRes.data, fileName: this.fileName };
            this.$emit("uploadSuccess", fileData);
          } else if (oRes && oRes.errorCode != 0) {
            this.$Message.error(oRes.errorMsg);
            this.mloading = false;
          } else {
            this.$Message.error("请求出错，请联系系统管理员");
            this.mloading = false;
          }
          this.$refs.uploadfile.value = null;
        })
        .catch(error => {
          this.mloading = false;
          this.curTipShow = true;
          this.uploadStatus = false;
          this.$Message.error("请求出错，请检查网络后重试！");
          this.mloading = false;
        });
    }
  }
};
</script>

